{% extends "base.html" %}
{% block title %}学员管理 - 乒乓球培训管理系统{% endblock %}
{% block page_title %}学员管理{% endblock %}

{% block extra_css %}
<style>
.student-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    margin-bottom: 1rem;
}

.student-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.student-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.search-section {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

@media (max-width: 768px) {
    .student-grid {
        grid-template-columns: 1fr;
    }

    .action-buttons {
        justify-content: center;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 汇总统计 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-1">总学员数</h5>
                        <h3 class="mb-0" id="totalStudents">{{ summary.total_students }}</h3>
                    </div>
                    <i class="bi bi-people fs-1 opacity-75"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-1">活跃学员</h5>
                        <h3 class="mb-0" id="activeStudents">{{ summary.active_students }}</h3>
                    </div>
                    <i class="bi bi-person-check fs-1 opacity-75"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-1">有教练学员</h5>
                        <h3 class="mb-0" id="studentsWithCoach">{{ summary.students_with_coach }}</h3>
                    </div>
                    <i class="bi bi-person-hearts fs-1 opacity-75"></i>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card" style="background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-1">本月新增</h5>
                        <h3 class="mb-0" id="newStudentsThisMonth">{{ summary.new_students_this_month }}</h3>
                    </div>
                    <i class="bi bi-plus-circle fs-1 opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 搜索筛选 -->
    <div class="search-section">
        <form method="GET" id="searchForm">
            <div class="row">
                <div class="col-md-3">
                    {{ form.keyword.label(class="form-label") }}
                    {{ form.keyword(class="form-control") }}
                </div>
                {% if current_user.is_super_admin() %}
                <div class="col-md-2">
                    {{ form.campus_id.label(class="form-label") }}
                    {{ form.campus_id(class="form-select") }}
                </div>
                {% endif %}
                <div class="col-md-2">
                    {{ form.status.label(class="form-label") }}
                    {{ form.status(class="form-select") }}
                </div>
                <div class="col-md-2">
                    {{ form.has_coach.label(class="form-label") }}
                    {{ form.has_coach(class="form-select") }}
                </div>
                <div class="col-md-2">
                    {{ form.sort_by.label(class="form-label") }}
                    {{ form.sort_by(class="form-select") }}
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i> 搜索
                    </button>
                </div>
            </div>
        </form>
    </div>


    <!-- 操作按钮 -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <button type="button" class="btn btn-outline-info" onclick="refreshData()">
                <i class="bi bi-arrow-clockwise"></i> 刷新数据
            </button>
        </div>
        <div>
            <span class="text-muted">共 {{ total }} 个学员</span>
        </div>
    </div>

    <!-- 学员列表 -->
    <div class="student-grid" id="studentList">
        {% for student in students %}
        <div class="card student-card">
            <div class="card-body">
                <div class="d-flex align-items-start mb-3">
                    {% if student.photo_url %}
                    <img src="{{ student.photo_url }}" alt="{{ student.real_name }}" class="student-avatar me-3">
                    {% else %}
                    <div class="student-avatar me-3 bg-secondary d-flex align-items-center justify-content-center">
                        <i class="bi bi-person-fill text-white fs-4"></i>
                    </div>
                    {% endif %}
                    <div class="flex-grow-1">
                        <h5 class="card-title mb-1">
                            <a href="{{ url_for('students.detail', id=student.id) }}" class="text-decoration-none">
                                {{ student.real_name }}
                            </a>
                        </h5>
                        <p class="text-muted mb-1">
                            <i class="bi bi-telephone"></i> {{ student.phone }}
                        </p>
                        {% if student.email %}
                        <p class="text-muted mb-1">
                            <i class="bi bi-envelope"></i> {{ student.email }}
                        </p>
                        {% endif %}
                        <p class="text-muted mb-0">
                            <i class="bi bi-building"></i>
                            {{ student.campus.name if student.campus else '未分配校区' }}
                        </p>
                    </div>
                    <div class="text-end">
                        <span class="badge status-badge
                              {% if student.status == 'active' %}bg-success{% else %}bg-secondary{% endif %}">
                            {% if student.status == 'active' %}活跃{% else %}不活跃{% endif %}
                        </span>
                    </div>
                </div>

                <!-- 学员信息 -->
                <div class="row mb-3">
                    <div class="col-6">
                        <small class="text-muted">性别</small>
                        <div>
                            {% if student.gender == 'male' %}
                                <i class="bi bi-gender-male text-primary"></i> 男
                            {% elif student.gender == 'female' %}
                                <i class="bi bi-gender-female text-danger"></i> 女
                            {% else %}
                                <i class="bi bi-question-circle text-muted"></i> 未设置
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-6">
                        <small class="text-muted">年龄</small>
                        <div>{{ student.age if student.age else '未设置' }}</div>
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="row mb-3">
                    <div class="col-4 text-center">
                        <small class="text-muted">教练数</small>
                        <div class="fw-bold text-primary">{{ student.student_relations.filter_by(status='approved').count() }}</div>
                    </div>
                    <div class="col-4 text-center">
                        <small class="text-muted">预约次数</small>
                        <div class="fw-bold text-success">{{ student.student_reservations.count() }}</div>
                    </div>
                    <div class="col-4 text-center">
                        <small class="text-muted">注册时间</small>
                        <div class="fw-bold text-info">
                            {{ student.created_at.strftime('%m-%d') if student.created_at else '--' }}
                        </div>
                    </div>
                </div>

                <!-- 最后登录 -->
                <div class="mb-3">
                    <small class="text-muted">注册时间</small>
                    <div>
                        {% if student.created_at %}
                            {{ student.created_at.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                            <span class="text-warning">从未登录</span>
                        {% endif %}
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <a href="{{ url_for('students.detail', id=student.id) }}" class="btn btn-sm btn-outline-info">
                        <i class="bi bi-eye"></i> 详情
                    </a>
                    <a href="{{ url_for('students.edit', id=student.id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-pencil"></i> 编辑
                    </a>
                    {% if current_user.is_super_admin() %}
                    <a href="{{ url_for('students.delete', id=student.id) }}"
                       class="btn btn-sm btn-outline-danger"
                       onclick="return confirm('确定要删除学员「{{ student.real_name }}」吗？')">
                        <i class="bi bi-trash"></i> 删除
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 空状态 -->
    {% if students|length == 0 %}
    <div class="text-center py-5">
        <i class="bi bi-people display-1 text-muted"></i>
        <h3 class="text-muted mt-3">暂无学员数据</h3>
        <p class="text-muted">请调整搜索条件或等待学员注册</p>
    </div>
    {% endif %}

    <!-- 分页 -->
    {% if pagination.pages > 1 %}
    <div class="d-flex justify-content-center mt-4">
        <nav aria-label="学员列表分页">
            <ul class="pagination pagination-sm flex-wrap">
                {% if pagination.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ pagination.prev_num }}{% for key, value in request.args.items() %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        <i class="bi bi-chevron-left"></i> 上一页
                    </a>
                </li>
                {% endif %}

                {% for page_num in pagination.iter_pages() %}
                    {% if page_num %}
                        {% if page_num != pagination.page %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_num }}{% for key, value in request.args.items() %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ page_num }}</a>
                        </li>
                        {% else %}
                        <li class="page-item active">
                            <span class="page-link">{{ page_num }}</span>
                        </li>
                        {% endif %}
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">…</span>
                    </li>
                    {% endif %}
                {% endfor %}

                {% if pagination.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ pagination.next_num }}{% for key, value in request.args.items() %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        下一页 <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
// 刷新数据
function refreshData() {
    // 刷新统计数据
    fetch('{{ url_for("students.api_summary") }}?' + new URLSearchParams({{ request.args|tojson }}))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('totalStudents').textContent = data.data.total_students;
                document.getElementById('activeStudents').textContent = data.data.active_students;
                document.getElementById('studentsWithCoach').textContent = data.data.students_with_coach;
                document.getElementById('newStudentsThisMonth').textContent = data.data.new_students_this_month;
            }
        })
        .catch(error => console.error('刷新数据失败:', error));
}

// 搜索表单自动提交
document.querySelectorAll('#searchForm select').forEach(select => {
    select.addEventListener('change', () => {
        document.getElementById('searchForm').submit();
    });
});

// 定时刷新统计数据
setInterval(refreshData, 60000); // 每分钟刷新一次
</script>
{% endblock %}